<template>
  <div class="user-profile">
    <Navbar />
    <el-page-header @back="goBack" content="返回"></el-page-header>

    <!-- 用户信息 -->
    <section class="user-info-section">
      <el-descriptions title="用户信息" :column="2" border class="description-container">
        <el-descriptions-item label="用户名">{{ user.username }}</el-descriptions-item>
        <el-descriptions-item label="邮箱">{{ user.email }}</el-descriptions-item>
        <el-descriptions-item label="注册日期">{{ user.registerDate }}</el-descriptions-item>
      </el-descriptions>
    </section>

    <!-- 我的收藏 -->
    <section v-if="favoriteRestaurants.length > 0" class="favorites-section">
      <h2 class="section-title"><i class="el-icon-star-on"></i> 我的收藏</h2>
      <el-row :gutter="20">
        <el-col :span="6" v-for="(restaurant, index) in favoriteRestaurants" :key="index">
          <el-card shadow="hover" @click="navigateToRestaurant(restaurant.id)" class="restaurant-card">
            <img :src="restaurant.image" alt="餐厅图片" class="restaurant-image">
            <div class="restaurant-info">
              <h3>{{ restaurant.name }}</h3>
              <p>{{ restaurant.address }}</p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </section>
    <section v-else class="no-favorites-section">
      <p>您还没有收藏任何餐厅。</p>
    </section>

    <!-- 历史记录 -->
    <section v-if="activities.length > 0" class="history-section">
      <h2 class="section-title"><i class="el-icon-time"></i> 历史记录</h2>
      <el-timeline>
        <el-timeline-item v-for="activity in activities" :key="activity.id" :timestamp="activity.timestamp">
          {{ activity.content }}
        </el-timeline-item>
      </el-timeline>
    </section>
    <section v-else class="no-history-section">
      <p>您还没有任何活动记录。</p>
    </section>
  </div>
</template>

<script>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();
    const user = ref({
      username: '张三',
      email: 'zhangsan@example.com',
      registerDate: '2024-01-01'
    });
    const favoriteRestaurants = ref([
      {id: 1, name: '美食天堂', address: '市中心商业区', image: 'https://img1.baidu.com/it/u=3694467961,2120749926&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1000'}
    ]);
    const activities = ref([
      {id: 1, timestamp: '2024-01-01', content: '评论了一家餐厅'}
    ]);

    const goBack = () => {
      router.back();
    };

    const navigateToRestaurant = (id) => {
      router.push({name: 'restaurant-detail', params: {id}});
    };

    return {
      user,
      favoriteRestaurants,
      activities,
      goBack,
      navigateToRestaurant
    };
  }
};
</script>

<style scoped>
.user-profile {
  padding: 20px;
  font-family: 'Arial', sans-serif;
  background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
  min-height: 100vh;
}

.description-container {
  background-color: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.restaurant-card {
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 20px;
  background-color: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.restaurant-card:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.restaurant-image {
  width: 100%;
  height: auto;
  border-bottom: 2px solid #eaeaea;
}

.restaurant-info {
  padding: 15px;
  text-align: center;
}

.section-title {
  font-size: 24px;
  color: #333;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.section-title i {
  margin-right: 10px;
  font-size: 28px;
  color: #ff6b6b; /* 可以更换为其他颜色 */
}

.no-favorites-section,
.no-history-section {
  text-align: center;
  color: #999;
  padding: 20px;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.el-timeline {
  margin-top: 20px;
}

/* 分隔线 */
.user-info-section::after,
.favorites-section::after,
.history-section::after {
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #eaeaea, transparent);
  margin: 20px 0;
}
</style>